import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import ProTable from '@ant-design/pro-table';
import { Input, Modal } from 'antd';
import { getSupplierList, setSupplierStatus } from '@/services/supplier';
import SupplierDetail from '@/pages/Supplier/supplierDetail';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

const SupplierList = () => {
  const actionRef = useRef();
  const [checkedId, setCheckedId] = useState();
  const detailRef = useRef();

  const columns = [
    {
      title: '供应商名称',
      key: 'title',
      valueType: 'text',
      hideInTable: true,
      renderFormItem: (_, { fieldProps }) => {
        return <Input {...fieldProps} placeholder="请输入供应商名称" />;
      },
    },
    {
      title: '供应商账号',
      key: 'phone',
      valueType: 'text',
      hideInTable: true,
      renderFormItem: (_, { fieldProps }) => {
        return <Input {...fieldProps} placeholder="请输入供应商账号" />;
      },
    },
    {
      title: '供应商信息',
      valueType: 'text',
      key: 'user_id',
      hideInSearch: true,
      render: (_) => {
        const { title, phone, user_id: userId } = _;
        return (
          <div>
            <div>名称：{title}</div>
            <div>账号：{phone}</div>
            <div>会员ID：{userId}</div>
          </div>
        );
      },
    },
    {
      title: '联系人信息',
      valueType: 'text',
      key: 'contact_name',
      hideInSearch: true,
      render: (_) => {
        const { contact_name: contactName, contact_phone: contactPhone } = _;
        return (
          <div>
            <div>联系人：{contactName}</div>
            <div>联系手机号：{contactPhone}</div>
          </div>
        );
      },
    },
    {
      title: '创建时间',
      valueType: 'text',
      dataIndex: 'created_at',
      key: 'created_at',
      hideInSearch: true,
    },
    {
      title: '状态',
      valueType: 'text',
      dataIndex: 'status',
      key: 'status',
      hideInSearch: true,
      valueEnum: {
        1: {
          text: '启用',
          status: 'Processing',
        },
        2: {
          text: '停用',
          status: 'Error',
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="view"
          onClick={() => {
            setCheckedId(record.id);
            detailRef.current.setVisible(true);
          }}
        >
          详情
        </a>,
        <a
          key="editable"
          onClick={() => {
            const { id, status } = record;
            confirm({
              title: '提示',
              content: `确认${status === 1 ? '停用' : '启用'}该供应商？`,
              icon: <ExclamationCircleOutlined />,
              onOk() {
                setSupplierStatus({ id, status: status === 1 ? 2 : 1 }).then(() => {
                  action.reload();
                });
              },
            });
          }}
        >
          {record.status === 1 ? '停用' : '启用'}
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        actionRef={actionRef}
        columns={columns}
        request={async (params) => {
          const paramsD = { ...params, page: params.current };
          const { data } = await getSupplierList({ ...paramsD });
          return {
            data: data.list,
            total: data.meta.pagination.total,
          };
        }}
        search={{
          defaultCollapsed: false,
        }}
        pagination={{
          pageSize: 10,
        }}
      />
      <SupplierDetail id={checkedId} ref={detailRef} />
    </PageContainer>
  );
};

const mapStateToProps = (state) => {
  return state;
};

export default connect(mapStateToProps)(SupplierList);
